@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply antialiased text-black bg-brand-primary;
}

@layer utilities {
  .heading {
    @apply text-3xl font-semibold md:text-4xl lg:text-5xl;
  }
  .sub-heading {
    @apply text-xl sm:text-2xl text-brand-gray max-w-prose;
  }

  .heading-small {
    @apply text-xl font-semibold sm:text-2xl lg:text-2xl xl:text-3xl;
  }
  .sub-heading-small {
    @apply text-lg sm:text-xl lg:text-2xl text-brand-gray max-w-prose;
  }

  .trans-pane {
    @apply border border-gray-400 bg-transparent;
  }
}

/*
 Firefox backdrop-blue fix
*/
@supports not (backdrop-filter: none) {
  .glass-pane {
    @apply bg-white opacity-100;
  }
}
